<template>
  <div>
    <div @click="back">
      <van-nav-bar left-text="返回" left-arrow @click-left="back" title="资讯" />
    </div>
    <div v-for="(item,index) in listpe" :key="index" class="Allren">
      <div>
        <img :src="'http://124.93.196.45:10001/'+item.avatarUrl" alt />
        <p class="name-p">
          {{item.name}} ----
          <span class="smll">好评率:{{item.favorableRate}}%</span>
        </p>
        <p class="facp">
          法律专长:
          <span class="big">{{item.legalExpertiseName}}</span>
        </p>
        <p class="facp">质询人数: {{item.serviceTimes}}</p>
        <div class="nian">工作开始于: {{item.workStartAt}}</div>
        <div class="facp">律师执照: {{item.licenseNo}}</div>
      </div>
      <p class="big_p">基本信息:</p>
      <div class="xingx">{{item.baseInfo}}</div>
      <p class="big_p">教育资讯:</p>
      <div class="jiaoyu">{{item.eduInfo}}</div>
    </div>
    <div>
      <button class="btnRou" @click="zicunlv">点击资讯律师</button>
    </div>
    <div class="plun" v-for="item in list" :key="item.id">
      <img :src="'http://124.93.196.45:10001/'+item.fromUserAvatar" alt />
      <span class="name">{{item.fromUserName}}</span>
      <p class="zi">留言:</p>
      <p class="time">{{item.createTime}}</p>
      <p>{{item.evaluateContent}}</p>
    </div>
  </div>
</template>

<script>
import mixin from '@/mixin/flag'
import { xianq, goodlun } from '@/service/falv'
export default {
  mixins: [mixin],
  data() {
    return {
      valuephone: '',
      zhuancID: '',
      lvID: '',
      listpe: [],
      list: [],
      loading: false,
      finished: false,
      valueInp: '',
      fileList: [
        // Uploader 根据文件后缀来判断是否为图片文件
        // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
        {
          url: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.pgdta0Rhl17ZGM0pusMGjgHaKY?w=203&h=285&c=7&r=0&o=5&dpr=1.5&pid=1.7',
          isImage: true,
        },
      ],
    }
  },
  created() {
    const res0 = this.$store.state.lvsID
    console.log(res0)
    this.lvID = res0
  },
  async mounted() {
    console.log('', this.lvID)
    const res = await xianq({
      id: this.lvID,
    })
    console.log('res', res)
    this.zhuancID = res.data.data.legalExpertiseId

    this.listpe.push(res.data.data)

    const xxy = await goodlun({
      id: this.lvID,
    })
    console.log('xxyx', xxy)
    this.list = xxy.data.rows.splice(1, 6)
    console.log('list', this.list)
  },
  methods: {
    back() {
      this.$router.push('/AlllawView')
    },
    zicunlv(){
       this.$router.push('/ZixunLvs')
    }
  },
}
</script>

<style lang="scss" scoped>
.Allren {
  img {
    margin-left: 150px;
    margin-top: 10px;
  }
}
.btnRou{
  width: 100%;
  margin: 10px 0;
  background-color: green;
  font-size: 20px;
}

.xingx {
  font-size: 16px;
  padding-left: 14px;
  margin-top: 10px;
  font-size: 14px;
  color: #000;
}
.jiaoyu {
  font-size: 15px;
  padding-left: 14px;
}
.name-p {
  padding-top: 15px;
  font-size: 17px;
  text-align: center;
}
.facp {
  font-size: 17px;
  text-align: center;
  margin-top: 10px;
}
.mine {
  font-size: 17px;
  padding-left: 20px;
  margin-top: 10px;
}
.nian {
  font-size: 17px;
  text-align: center;
  margin-top: 10px;
}
.big_p {
  font-size: 16px;
  padding-left: 14px;
  margin: 10px 0;
}
.btn {
  width: 100px;
  height: 40px;
  font-size: 14px;
  margin: 10px 0;
  margin-left: 14px;
  background-color: pink;
  border: 1px solid red;
}
.goodfn {
  width: 100%;
  height: 40px;
  font-size: 14px;
}
.smll {
  font-size: 12px;
  color: red;
}
.big {
  font-size: 17px;
  font-weight: 800;
}
// pl
.plun {
  width: 100%;
  height: 100px;
  border-bottom: 1px solid pink;
  img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    vertical-align: middle;
  }
  .name {
    font-size: 15px;
    margin-left: 15px;
  }
  .time {
    font-size: 14px;
  }

  .zi {
    font-size: 15px;
  }

  .fnt {
    width: 100%;
    height: 30px;
  }
}
::-webkit-input-placeholder {
  /* WebKit browsers */
  color: #999;
  font-size: 16px;
  line-height: 20px;
}
input {
  margin: 10px 0;
}
</style>